<script setup>
import acomp from './component/a.vue';

//生命周期使用需要import导入
import {onBeforeMount,onMounted,onUpdated,onBeforeUpdate} from "vue";

const count = $ref(0)
const flag = $ref(true)
onBeforeMount( ()=>{
  console.log('onBeforeMount')
} )
onMounted(()=>{ //挂载之后
  console.log('onMounted')
})

onUpdated(() => {
  // 文本内容应该与当前的 `count.value` 一致
  //console.log(document.getElementById('count').textContent)
  console.log('只要页面dom更新 则onUpdated执行。。。')
})

onBeforeUpdate(()=>{
  console.log('onBeforeUpdate')
})

</script>

<template>
  <h4>生命周期</h4>
  <button id="count" @click="count++">{{ count }}</button>
  <p v-if="flag" >显示、隐藏</p>
  <button @click="flag=!flag">点击</button>

  <acomp v-if="flag"></acomp>

</template>
